<template>
    <div>
        <div class="searchHeader">
            <el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
            <el-button @click="listCustomerByKeyWords" size="mini" type="primary" icon="el-icon-search">搜索用户</el-button>
            <el-button size="mini" type="success" @click="exportExcel">导出Excel</el-button>
            <el-upload
                    :on-error="onError"
                    :on-progress="onProgress"
                    :on-success="changeImportText"
                    :header="header"
                    :show-file-list="false"
                    class="upload-demo"
                    action="/customer/importExcel">
                <el-button size="mini" type="success">{{importText}}</el-button>
            </el-upload>
        </div>
        <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="userData"
                border
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    width="240"
                    prop="email"
                    label="邮箱地址">
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="nickname"
                    label="用户昵称">
            </el-table-column>
            <el-table-column
                    width="55"
                    label="性别">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.gender">女</el-tag>
                    <el-tag type="danger" v-else>男</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="joinTime"
                    width="180"
                    label="加入时间">
            </el-table-column>
            <el-table-column
                    width="200"
                    prop="location"
                    label="坐标">
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="sign"
                    label="座右铭">
            </el-table-column>
            <el-table-column
                    width="150"
                    label="是否启用">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="启用"
                            inactive-text="禁用">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    width="180"
                    label="是否删除">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.delMark"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="未删除"
                            inactive-text="已删除">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column width="150" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <div>
            <el-button size="mini" type="danger" :disabled="multiDelBtn">批量删除</el-button>
        </div>
        <br>
        <el-pagination
                @current-change="currentChange"
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "CommonUser",
        data() {
            return {
                header: 'multipart/form-data',
                multiDelBtn : true,
                importText : '导入Excel',
                pageNum: 1,
                total: 0,
                pageSize: 6,
                userData: [], // 用户信息
                loading: true,
                keyWords: ''// 搜索关键字
            }
        },
        methods: {
            onError() {
                this.importText = '导入Excel';
            },
            onProgress() {
                this.importText = '正在上传';
            },
            changeImportText() {
                this.importText = '导入Excel';
            },
            exportExcel() { // 导出 Excel
                window.open("/customer/exportExcel?keyWords="+this.keyWords, "_parent");
            },
            listCustomerByKeyWords() { // 通过关键字查询用户
                this.pageNum = 1;
                this.initUserDatas();
            },
            currentChange(pageNum) { // 分页回调
                this.pageNum = pageNum;
                this.initUserDatas();
            },
            initUserDatas() { // 查询用户信息
                this.$getRequest('/customer/?keyWords=' + this.keyWords + '&pageNum=' + this.pageNum + '&pageSize=' + this.pageSize).then(resp => {
                    if (resp) {
                        this.userData = resp.list;
                        this.total = resp.total;
                        this.loading = false;
                    }
                })
            }
        },
        mounted() {
            this.initUserDatas();
        }
    }
</script>

<style scoped>
    .searchHeader {
        margin-bottom: 10px;
    }

    .searchHeader .articleSearchText {
        width: 300px;
        margin-right: 10px;
    }
    .upload-demo{
        display: inline-block;
        margin-left: 8px;
    }
</style>